<template>
	<view class="admin-record-detail-add-and-edit">
		<titleName :name="name"></titleName>
		<view class="title-bgc"></view>
		<view style="height: 14rpx;background-color: #F3F5F7;width: 100vw;">
		</view>
		<view class="content-wrap">
			<view class="sewage style-wrap">
				<view class="name"><text>*</text>处置单位</view>
				<view class="val"><uni-data-select class="two" style="width: 100%;" placeholder="请选择签订的处置单位名称"
						v-model="enterpriseMsg.disposeenterpriseid" :localdata="disposeList"></uni-data-select></view>
			</view>
			<view class="enterprise-name style-wrap">
				<view class="name">
					<text>*</text>处置时间
				</view>
				<view class="val" style="padding-left: 10rpx;"><uni-datetime-picker type="date" :clear-icon="false"
						v-model="enterpriseMsg.commitdate" :disabled="addMsg!=1" /></view>

			</view>
			<view class="session style-wrap">
				<view class="name"><text>*</text>涉废类型</view>
				<view class="val">
					<uni-data-select style="width: 100%;" v-model="enterpriseMsg.wastetype" :localdata="adviceTypeList"
						placeholder="请选择涉废类型" pl></uni-data-select>

				</view>
			</view>

			<view class="address style-wrap">
				<view class="name"><text>*</text>处置联单编号</view>
				<view class="val"><input type="text" placeholder-class="ipt-class" placeholder="请输入联单编号"
						v-model="enterpriseMsg.orderno" /></view>
			</view>
			<view class="address style-wrap">
				<view class="name"><text>*</text>处置量(kg)</view>
				<view class="val"><input type="text" placeholder-class="ipt-class" placeholder="请输入转移量(kg)"
						v-model="enterpriseMsg.wastenum" /></view>
			</view>
			<view class="address style-wrap submit-photo">
				<view class="name"><text>*</text>处置联单图片</view>
				<view class="img-wrap">
					<view class="add-img" @click="uploadImage">
						<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/phone.png"
							mode=""></image>
						<text>（最多三张）</text>
					</view>
					<view class="add-img add-img-new" v-for="item,index in imgList" :key="index">
						<image @click="searchImage(item)" :src="item" style="" mode=""></image>
						<view class="dele-img"
							style="width: 30rpx;height: 30rpx;background: #989A9E;border-radius: 50%;padding: 0;"
							@click="deleImage(index)">
							✕
						</view>
					</view>
				</view>
			</view>


			<view class="admin-two style-wrap">
				<view class="name"><text>*</text>车辆信息</view>
				<view class="val"><input type="text" placeholder="请输入车牌号" placeholder-class="ipt-class"
						v-model="enterpriseMsg.transtruck" /></view>
			</view>
			<view class="admin-one style-wrap">
				<view class="name"><text>*</text>驾驶员信息</view>
				<view class="val"><input type="text" placeholder-class="ipt-class" placeholder="请输入驾驶员名称"
						v-model="enterpriseMsg.transdriver" /></view>
			</view>


		</view>

		<view class="btn-wrap">
			<button @click="save">提交</button>
		</view>


	</view>
</template>

<script setup>
	import titleName from '../../components/titleName.vue'
	import http from '../../request/index'
	import uploadFile from '../../request/uploadFile.js'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		reactive,
		ref,
		computed
	} from 'vue'
	let name = ref('新增')
	let dataTree = ref([])
	let enterpriseName = ref('')
	let adviceTypeList = ref([])
	let disposeList = ref([])
	let enterpriseMsg = reactive({})
	let id1 = ref('')
	let dischargeStyle = reactive({})
	let departmentList = ref([])
	let imgList = ref([])
	let areaid = ref('')
	let addMsg = ref(1)
	onLoad((e) => {
		console.log(e, 'e');
		if (e.areaid != 'undefined') {
			areaid.value = e.areaid || ''
		}
		addMsg.value = e.add || ''
		id1.value = e.id || ''
		let id = e.id

		if (addMsg.value == 1) {
			name.value = '新增'
			enterpriseMsg.stockenterpriseid = Number(id1.value)
		} else {
			enterpriseName.value = e.name
			name.value = "修改信息"
			if (id) {
				http({
					url: '/wasteDispose/detail',
					data: {
						id
					}
				}).then((res) => {
					if (res.code == 0) {
						let data = res.data
						if (data.disposeimgurl) {
							imgList.value = data.disposeimgurl.split(',')
						}

						console.log(imgList, 'imgList');
						enterpriseMsg.disposeimgurl = data.disposeimgurl
						enterpriseMsg.disposeenterpriseid = data.disposeenterpriseid
						enterpriseMsg.id = data.id
						enterpriseMsg.stockenterpriseid = data.stockenterpriseid
						enterpriseMsg.orderno = data.orderno
						enterpriseMsg.commitdate = data.commitdate.split(' ')[0]
						// enterpriseMsg.wastecode = data.wastecode
						enterpriseMsg.wastenum = data.wastenum
						enterpriseMsg.wastetype = String(data.wastetype)
						enterpriseMsg.transtruck = data.transtruck
						enterpriseMsg.transdriver = data.transdriver


					}
				})
			}
		}

	})

	onShow(() => {

	})
	let uploadImage = () => {
		uni.chooseImage({
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			count: 3,
			success: function(res) {
				let tempFilePaths = res.tempFilePaths
				for (var i = 0; i < tempFilePaths.length; i++) {
					uploadFile({
						filePath: tempFilePaths[i]
					}).then((res) => {

						if (res.code == 0) {
							imgList.value.push(res.data.url)
							if (imgList.value.length > 3) {
								imgList.value.shift()
							}
						}

					})
				}



			}
		});
	}
	let deleImage = (index) => {
		imgList.value.splice(index, 1)
	}
	let save = () => {

		// let reg = /^1\d{10}$/
		// if (!reg.test(enterpriseMsg.hbmobile) || !reg.test(enterpriseMsg.hbmobilesecond)) {
		// 	uni.showToast({
		// 		title: '手机格式不正确',
		// 		icon: 'error',
		// 		mask: true
		// 	})
		// 	return
		// }
		enterpriseMsg.disposeimgurl = imgList.value.join(',');
		console.log(enterpriseMsg, 'enterpriseMsg');
		let keys = Object.keys(enterpriseMsg)
		console.log(keys, 'keys');
		for (let key in enterpriseMsg) {
			if (!enterpriseMsg[key] && enterpriseMsg[key] == '') {
				uni.showToast({
					title: '请完整填写信息',
					icon: 'error',
					mask: true
				})
				console.log(1);
				return
			}
		}

		if (addMsg.value == 1) {
			if (keys.length != 9) {
				uni.showToast({
					title: '请完整填写信息',
					icon: 'error',
					mask: true
				})
				console.log(2);
				return
			}
		} else {

			if (keys.length != 10) {
				uni.showToast({
					title: '请完整填写信息',
					icon: 'error',
					mask: true
				})
				console.log(3);
				return
			}
		}



		http({
			url: "/wasteDispose/addOrUpdate",
			data: enterpriseMsg
		}).then((res) => {
			if (res.code == 0) {
				if (addMsg.value == 1) {
					uni.showToast({
						title: '添加成功',
						icon: 'none'
					})
					setTimeout(() => {
						uni.redirectTo({
							url: `/contorllerPageOther/admindisposerecordlist/admindisposerecordlist?id=${id1.value}&areaid=${areaid.value}`
						})
					}, 1500)
				} else {
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					})
					setTimeout(() => {
						uni.redirectTo({
							url: `/contorllerPageOther/admindisposerecorddetail/admindisposerecorddetail?id=${id1.value}&areaid=${areaid.value}&name=${enterpriseName.value}`
						})
					}, 1500)
				}


			}
		})




	}

	let searchImage = (url) => {

		if (!url) {
			uni.showToast({
				title: '暂无照片',
				icon: 'none'
			})
			return
		}
		let imgUrl = url.split(',')
		uni.previewImage({
			urls: imgUrl,
			current: 0
		})
	}
	let environmentaChange = (e) => {
		enterpriseMsg.supportdepartmentid = range.value[e].id
	}
	let sessionChange = (e) => {

		let id = e.detail.value[e.detail.value.length - 1].value

		enterpriseMsg.district = id
	}
	http({
		url: '/enterpriseThird/listThirdEnterprises'
	}).then((res) => {
		if (res.code == 0) {


			disposeList.value = res.data.map((item) => {
				return {
					value: item.id,
					text: item.enterprisename
				}
			})

		}

	})
	http({
		url: '/listitem/getmodule',
		data: {
			module: 'B03'
		}
	}).then((res) => {
		if (res.code == 0) {
			let data = res.data
			adviceTypeList.value = data.map((item) => {
				return {
					text: item.name,
					value: item.id
				}
			})

		}

	})

	function mapTree(data) {
		console.log(data, 'data');
		if (data.length <= 0) return

		return data.map((item) => {
			item.text = item.regionname
			item.value = item.id
			if (item.lstSubNodes && item.lstSubNodes.length > 0) {
				item.children = item.lstSubNodes
				for (var i = 0; i < item.lstSubNodes.length; i++) {

					item.children[i].text = item.lstSubNodes[i].regionname
					item.children[i].value = item.lstSubNodes[i].id
					if (item.lstSubNodes[i].lstSubNodes && item.lstSubNodes[i].lstSubNodes.length > 0) {
						mapTree(item.lstSubNodes[i].lstSubNodes)
					}


				}
			}
			return item

		})

	}
	http({
		url: '/region/datalisttree'
	}).then((res) => {
		if (res.code == 0) {
			let data = res.data
			let cc = mapTree(data)

			console.log(cc, 'data');
			dataTree.value = data



		}

	})
</script>

<style lang="scss" scoped>
	:deep(.ipt-class) {

		font-weight: 400;
		font-size: 24rpx;
		color: #999999;


	}

	:deep(.uni-date) {
		height: 100% !important;
		border: none !important;
	}

	:deep(.uni-date-editor) {
		height: 100% !important;

	}

	:deep(.uni-date-x) {
		height: 100% !important;
		border: none !important;
	}

	:deep(.uni-date-editor--x) {
		height: 100% !important;
		border: none !important;
	}

	:deep(.selected-area) {
		padding-left: 0 !important;
		font-size: 26rpx !important;
	}

	:deep(.uni-select) {
		border: none !important;
		padding-left: 0;
	}

	:deep(.selected-area) {
		padding-left: 14rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;

	}

	:deep(.uni-select__input-box) {
		padding-right: 5rpx;
	}

	:deep(.data-picker::placeholder) {
		color: red !important;
		padding-left: 30rpx;
	}

	:deep(.uni-icons.uniui-clear) {
		font-size: 22rpx;
	}

	:deep(.selected-list) {
		font-size: 28rpx;
		color: #333333;
		font-weight: 400;
	}

	:deep(.input-value) {
		padding: 0 !important;
	}

	:deep(.input-value-border) {
		border: none;
		height: 100%;
		padding-right: 25rpx;
	}

	:deep(.uni-data-tree) {
		padding-right: 5rpx;
	}

	:deep(.popper__arrow) {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}

	:deep(.popper__arrow) {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}

	:deep(.uni-select__input-text) {

		font-weight: 400;
		font-size: 28rpx;
		color: #333333;

	}

	.admin-record-detail-add-and-edit {
		width: 100vw;
		height: 100vh;


		.title-bgc {
			width: 750rpx;
			height: 160rpx;
			background: #0874FA;
		}

		.btn-wrap {
			margin-top: 70rpx;
			padding-bottom: 65rpx;

			button {
				margin: 0 auto;
				width: 672rpx;
				height: 88rpx;
				background: #0874FA;
				border-radius: 44rpx;

				font-weight: 500;
				font-size: 31rpx;
				color: #FFFFFF;
				line-height: 88rpx;
			}
		}

		.business-license,
		.sewage-discharge {
			// margin-top: 20rpx;
			padding-bottom: 20rpx;

			.name {

				font-size: 30rpx;
				color: #000;
				line-height: 33rpx;
				padding-left: 30rpx;
				height: 85rpx;
				line-height: 85rpx;
				width: auto !important;

				text {
					color: #F82A24;
				}

			}

			.val {
				width: 100vw;
				padding: 0 30rpx 0 26rpx;
				margin-top: 10rpx;

				.wrap {
					min-height: 376rpx;
					background: #FFFFFF;
					border-radius: 14rpx;
					border: 1px dashed #BFBFBF;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					overflow: hidden;

					image {
						width: 304rpx;
						height: 235rpx;

					}
				}

				.btm {
					margin-top: 36rpx;
					display: flex;
					align-items: center;

					image {
						width: 36rpx;
						height: 29rpx;
						margin-right: 15rpx;
					}

					text,
					button {

						font-weight: 400;
						font-size: 28rpx;
						color: #CBCDD5;


					}
				}
			}
		}

		.content-wrap {
			padding-top: 20rpx;

			.style-wrap {
				padding-left: 30rpx !important;
				padding-right: 28rpx !important;

				.name {
					display: flex;
					justify-content: flex-start;
					width: 250rpx;
					font-weight: 400 !important;
					font-size: 31rpx !important;
					color: #000000 !important;

					text {
						color: #F82A24 !important;
					}
				}

				.val {
					width: 491rpx;
					height: 59rpx;
					background: #FAFAFA;
					border-radius: 7rpx;
					border: 1px solid #BFBFBF;
					padding-left: 30rpx;

					input {
						width: 100%;
						font-weight: 400;
						font-size: 26rpx;
						color: #333333;

					}
				}
			}

			.submit-photo {
				display: flex !important;
				flex-direction: column !important;
				align-items: center !important;
				height: auto !important;
				align-self: flex-start !important;
				padding: 0;

				.name {
					align-self: flex-start !important;
				}

				.img-wrap {
					padding-left: 15rpx;
					display: flex;
					margin-top: 10rpx;
					align-self: flex-start;
					margin-bottom: 50rpx;

					.add-img:first-child {
						margin-left: 0rpx;
					}

					.add-img-new {
						border: none !important;
					}

					.add-img {
						margin-top: 39rpx;
						width: 148rpx;
						height: 150rpx;
						background: #FFFFFF;
						border-radius: 7rpx;
						border: 2px dashed #BFBFBF;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						margin-left: 22rpx;
						position: relative;

						image {
							width: 100%;
							height: 100%;

						}

						text {
							margin-top: 11rpx;
							font-weight: 400;
							font-size: 15rpx;
							color: #999999;

						}

						.dele-img {
							width: 30rpx;
							height: 30rpx;
							background: #989A9E;
							position: absolute;
							border-radius: 50%;
							right: -15rpx;
							top: -15rpx;
							color: #FFFFFF;
							display: flex;
							font-size: 17rpx;
							align-items: center;
							justify-content: center;
						}
					}
				}

			}

			view {
				display: flex;
				justify-content: space-between;
				height: 85rpx;
				padding: 48rpx 45rpx 45rpx 45rpx;
				align-items: center;

				.name {

					font-weight: 400;
					font-size: 31rpx;
					color: #666666;

					padding: 0;
				}

				.val {

					font-weight: 400;
					font-size: 33rpx;
					color: #333333;
					padding: 0;
				}
			}
		}
	}
</style>